<template>
	<view class="zone">
		<Header title="水晶包" :headertype="2"></Header>
		<view class="main"> 
			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<view class="list" v-show="stat==1">
				<view class="item" v-for="(item , index) in list" :key="index">
					<view class="top">
						<view class="left">
							<image src="http://img.cpgm.cc/panda/static/index/1.png" mode="widthFix" />
							<view class="word">
								<text>{{item.name}}</text>
								<text>消耗水晶： <span>{{item.gold}}</span> </text>
								<text>每日可领水晶： <span>{{item.reward}}</span> </text>
								<text>共计可领水晶： <span>{{item.together}}</span></text>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" class="button" :throttle-time="1000" @click="buyWorkShop(item)">
							{{!!item.is_rece?'已投入':'投入'}}
						</u-button>
					</view>

					<view class="botbox">
						<text>{{item.explain}}</text>
						<text>有效期：{{item.days}}天</text>
					</view>
				</view>
			</view>

			<view class="list" v-show="stat==2">
				<view class="item" v-for="(item , index) in list2" :key="index">
					<view class="top">
						<view class="left">
							<image src="http://img.cpgm.cc/panda/static/index/1.png" mode="widthFix" />
							<view class="word">
								<text>{{item.name}}</text>
								<text>消耗水晶： <span>{{item.gold}}</span> </text>
								<text>每日可领： <span>{{item.reward}}</span> </text>
							</view>
						</view>
						<view class="right">
							<p>剩余时间：{{item.days}}天</p>
							<u-button :plain="true" :hair-line="false" hover-class="none" :class="[!!item.is_rece?'grey':'']" :throttle-time="1000" class="button" @click="getTaskReward(item)">
							{{!!item.is_rece?'已领取':'领取'}}
						</u-button>
						</view>
					</view>
				</view>

				<view class="empty" v-if="list2 == ''">
					<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" mode="widthFix" />
					<text>数据为空</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stat:1,
				tablist: [
					{
						id: 1,
						name: '水晶任务',
					},
					{
						id: 2,
						name: '我的投入'
					},
				],
				list:[
					{
						img:'1.png',
						name:'新手水晶包',
						explain:'升级至恐龙熊猫或以上可领取',
						together:750,
					},
					{
						img:'1.png',
						name:'初级水晶包',
						explain:'升级至芭比熊猫或以上可领取',
						together:3000,
					},
					{
						img:'1.png',
						name:'中级水晶包',
						explain:'升级至如来或以上可领取',
						together:15000,
					},
					{
						img:'1.png',
						name:'高级水晶包',
						explain:'升级至羽灵神或以上可领取  ',
						together:75000,
					},
					{
						img:'1.png',
						name:'终极水晶包',
						explain:'升级至仙主或以上可领取',
						together:300000,
					},
				],
				list2:[],
			};
		},
		onLoad(){
			this.workShopList();
		},
		methods: {
			tabchange(id) {
				this.stat = id
			},

			// 获取列表
			async workShopList(){
				this.list2 = []
				let res = await this.$http.index.workShopList();
				for (let i = 0; i < res.data.length; i++) {
					this.list[i] = {...this.list[i] , ...res.data[i]}
					if(!!this.list[i].is_task) {
						this.list2.push(this.list[i])
					}
				}
				this.$forceUpdate()
			},

			// 解锁任务
			async buyWorkShop(item){
				if(!!item.is_task) {
					this.$u.toast('已投入')
				}else {
					let res = await this.$http.index.buyWorkShop({
						type:item.type
					})
					if(res.code == 1) {
						this.$u.toast('投入成功')
						this.workShopList();
					}else{
						this.$u.toast(res.msg);
					}
				}
				
			},

			// 领取水晶任务包奖励
			async getTaskReward(item){
				if(!!item.is_rece) {
					this.$u.toast('今日已领取')
				}else {
					let res = await this.$http.index.getTaskReward({
						type:item.type
					});
					this.$u.toast(res.msg);
					if(res.code == 1) {
						this.workShopList()
					}
				}
			},
		},
	}
</script>

<style lang="less">

.zone {
	background: linear-gradient(90deg, #E5FCFA 0%, #FAE1F4 100%);
	min-height: 100vh;
}
.main {
	padding: 10px;
}


// tab导航
.tab {
	width: 90%;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	margin: 0 auto;

	view {
		width: 50%;
		height: 36px;
		text-align: center;
		line-height: 36px;
		color: #343434;
		font-size: 13px;
		font-weight: 600;
	}
}
.active {
	color: #FFFFFF !important;
	background: #000;
}




.item {
	background: #FFFFFF;
	border-radius: 13px;
	border: 1px solid #FEE1C3;
	padding: 15px;
	margin: 10px 0;

	.button {
		width: 91px;
		height: 34px;
		background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
		border-radius: 5px;
		font-weight: 600;
	}
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.left {
	display: flex;
	align-items: center;

	image {
		width: 50px;
		margin-right: 10px;
	}

	.word {
		display: flex;
		flex-direction: column;

		text:nth-child(1) {
			font-size: 16px;
			font-weight: 600;
			color: #131314;
			line-height: 24px;
		}

		text:nth-child(2),
		text:nth-child(3),
		text:nth-child(4) {
			font-size: 12px;
			color: #131314;
			span {
				color: #239D4C;
			}
		}
	}
}

.botbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;

	text:nth-child(1) {
		color: #343434;
		font-size: 12px;
	}
	text:nth-child(2) {
		color: #A1A1A1;
		font-size: 12px;
	}
}

.right {
	display: flex;
	flex-direction: column;
	align-items: center;

	p {
		color: #A1A1A1;
		margin-bottom: 10px;
	}
}

</style>
